import React from 'react';
import Name from './name';
import Foorm from './form';

function makeId() {
    let text = "";
    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (let i = 0; i < 5; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

export default class Home extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'foo',
            count: 0,
            nameVisible: true,
            val: 0,
        }
    }

    changeName = () => {
        this.setState({
            name: makeId(),
        });
    };

    asyncSetState = (state = {}) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.setState(state, resolve)
            }, 1000)
        })
    }

    resetSameName = () => {
        // this.setState({
        //     name: this.state.name,
        //     nameVisible: !this.state.nameVisible,
        // })
        this.asyncSetState({
            name: makeId(),
        }).then(res => {
        })
    };

    foo = () => {
        console.dir(1)
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.dir(2)
        })
        console.dir(3)
        this.setState({
            count: this.state.count + 1
        }, () => {
            console.dir(4)
        })
    }

    incrCount = () => {
        this.setState({ val: this.state.val + 1 });
        console.log(this.state.val);    // 第 1 次 log

        this.setState({ val: this.state.val + 1 });
        console.log(this.state.val);    // 第 2 次 log

        setTimeout(() => {
            this.setState({ val: this.state.val + 1 });
            console.log(this.state.val);  // 第 3 次 log

            this.setState({ val: this.state.val + 1 });
            console.log(this.state.val);  // 第 4 次 log
        }, 0);
        // setTimeout(() => {
        //     console.dir(1)
        //     this.setState({
        //         count: this.state.count + 1
        //     }, () => {
        //         console.dir(2)
        //     })
        //     console.dir(3)
        //     this.setState({
        //         count: this.state.count + 1
        //     }, () => {
        //         console.dir(4)
        //     })
        // })
    }

    incrCountFunc = () => {
        this.setState((state, props) => {
            return {
                count: state.count + 1
            }
        })
        this.setState((state, props) => {
            return {
                count: state.count + 1
            }
        })
    }

    testClick(e) {
        console.dir(e)
        console.dir(this)
    }

    render() {
        return (
            <React.Fragment>
                <Foorm />
                <button
                    onClick={this.resetSameName}
                >
                    resetSameName
                </button>
                <button
                    onClick={this.incrCount}
                >
                    incrCount
                </button>
                <button onClick={this.testClick}>
                    testClick
                </button>
                <br />
                count: {this.state.count},
                {this.state.nameVisible ?
                    <Name name={this.state.name} />
                    : undefined}
            </React.Fragment>
        )
    }
}
